<template>
  <div>
    <el-card>
      <h1>{{config.title}}</h1>
      <div class="title-dec">{{config.title_dec}}</div>
      <h4>{{config.demo}}</h4>
      <components  />
    </el-card>
    <br />
    <el-card>
      <h1>代码展示</h1>
      <highlightjs language="javascript" :code="vueCode" />
    </el-card>
    <br />
    <el-card v-if="example">
      <example />
    </el-card>
  </div>
</template>

<script setup>
import { getVueCode, importFile } from "@/common";

const router = useRouter();
const route = useRoute();
const vueCode = ref("");

const componentName = route.name;
const config = importFile({folder:componentName, file:'config.js'});
const components = importFile({folder:componentName, file:'index.vue'});
const example = importFile({folder:componentName, file:'example.md'});

// 首次进入调用列表接口
onMounted(async () => {
  getVueCode(componentName).then(res => {
    vueCode.value = res;
  });
});
</script>

<style lang="scss" scoped>
.title-dec {
  font-size: 14px;
}
</style>
